<template>
  <div class="preview-list-item">
    <div class="content-wrapper" :class="{ invalid: fileItem.isFollow === '0' }">
      <div class="file">
        <div class="file-title" :title="fileItem.name">
          <i class="el-icon-paperclip"></i>
          <span
            v-if="
              DOC_TYPE === fileItem.previewType &&
              fileItem.duration !== null &&
              fileItem.duration !== '' &&
              fileItem.duration !== '0'
            "
            class="word-count"
            :class="{ 'count-wraning': fileItem.duration < 100 }">
            （{{ fileItem.duration || 0 }}字）
          </span>
          {{ fileItem.name }}
        </div>
      </div>
      <i class="icon-btn el-icon-view" :title="smallLayout && '查看'" @click="$emit('preview')">
        <span v-show="!smallLayout">查看</span>
      </i>
      <i
        class="icon-btn el-icon-download"
        :title="smallLayout && '下载'"
        v-if="showDownload"
        @click="$emit('download')">
        <span v-show="!smallLayout">下载</span>
      </i>
      <i class="icon-btn el-icon-delete" :title="smallLayout && '删除'" v-if="showDelete" @click="$emit('delete')">
        <span v-show="!smallLayout">删除</span>
      </i>
    </div>
    <div class="invalid-tips" v-if="fileItem.isFollow === '0'">
      <i class="el-icon-warning"></i>
      缺失关键词：{{ fileItem.keyword | keywordDisplay }}
    </div>
  </div>
</template>

<script>
import { FILE_PREVIEW_TYPE } from '@utility/dict'
export default {
  name: 'PreviewListItem',
  components: {},
  props: {
    fileItem: {
      type: Object,
    },
    showDownload: {
      type: Boolean,
      default: true,
    },
    showDelete: {
      type: Boolean,
      default: false,
    },
    smallLayout: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      DOC_TYPE: FILE_PREVIEW_TYPE.doc,
    }
  },
  filters: {
    keywordDisplay(keyword) {
      if (keyword.indexOf('_') !== -1) {
        let keywordArr = []
        keywordArr = keyword.split('_').filter(li => {
          return li !== ''
        })
        return keywordArr.join('；')
      } else {
        return keyword
      }
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.preview-list-item {
  // display: flex;
  // align-items: center;
  // padding: 2px;
  // color: #2b78f1;
  // width: 100%;
  // line-height: 20px;
  margin-bottom: 5px;
  width: 100%;

  .content-wrapper {
    display: flex;
    align-items: center;
    padding: 2px;
    color: #2b78f1;
    width: 100%;
    line-height: 20px;
    &.invalid {
      border: 1px dashed #f17c80;
    }
    &:hover {
      background: #faf7f3;
    }
  }
  .file {
    flex: 1;
    font-size: 14px;
  }
  .file-title {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }
  .icon-btn {
    margin-left: 5px;
    // margin-top: 5px;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
      color: #2b78f1;
    }
    &::before {
      margin-right: 3px;
    }
  }
  .invalid-tips {
    color: #d23b41;
  }
  .count-wraning {
    color: #e6a23c;
  }
}
</style>
